<!DOCTYPE html>
<html>
    <head>
        <title>{$title}</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="keywords" content="{$keywords}">
        <meta name="description" content="{$description}">
        <link rel="shortcut icon" href="__PUBLIC__/favicon.ico">
        <link rel="stylesheet" href="__PUBLIC__/App/famulei/css/swiper.min.css?v=1.0">
        <link rel="stylesheet" href="__PUBLIC__/App/famulei/css/style.css?v=1.0">
        <!-- 引入 jQuery 库 -->
        <script type="text/javascript" src="__PUBLIC__/App/famulei/js/jquery.1.2.6.js"></script>
        <script type="text/javascript" src="__PUBLIC__/App/famulei/js/jquery.jparallax.js"></script>
        <script type="text/javascript" src="__PUBLIC__/App/famulei/js/swiper.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/App/famulei/js/knockout-2.3.0.js"></script>
        <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/web/paging.js"></script>
        <script type="text/javascript" src="__PUBLIC__/App/famulei/js/index.js?v=1.0.2"></script>
        <script type="text/javascript">
            {:C('GLOBAL_BDHM')}
        </script>
    </head>

    <body>
        <!--part1-->
        <div class="part-one relative">
            <div class="header absolute">
                <div class="width13">
                    <p class="toplogo">
                        <img src="__PUBLIC__/App/famulei/images/logo.png"/>
                    </p>
                    <a href="{:U('/')}#famulei" target="_blank" class="intowebsite">进入官网</a>
                </div>
            </div>
            <!--移动-->
            <div id="parallax" class="relative">
                <div class="colorlf absolute">
                    <img src="__PUBLIC__/App/famulei/images/sekuai-left.png" class="absolute" alt=""/>
                </div>
                <div class="colortop absolute">
                    <img src="__PUBLIC__/App/famulei/images/sekuai-top.png" class="absolute" alt="" />
                </div>
                <div class="colorrg absolute">
                    <img src="__PUBLIC__/App/famulei/images/sekuai-right.png" class="absolute" alt=""/>
                </div>
            </div>
        </div>

        <!--part2-->
        <!-- ko if:winningVideos().length > 0 -->
        <div class="part-two width13 hightlight relative">
            <h1><img src="__PUBLIC__/App/famulei/images/highlights.png"/></h1>
            <p class="font16">他们都得奖了？你还不试试？</p>

            <h2><span class="left">【<!-- ko text:curdate --><!-- /ko -->期】每日最佳</span><span class="left">幸运玩家</span></h2>
            <div class="swiper-container">
                <div class="swiper-wrapper" data-bind="foreach:winningVideos">
                    <!-- 获奖视频 -->
                    <div class="swiper-slide">
                        <div class="hightlvideo left" data-bind="with:videos[0]">
                            <div class="myElementout">
                                <img src="" data-bind="attr:{'src':thumb}" />
                            </div>
                            <span class="preview-title font14" data-bind="text:title"></span>
                            <p class="display-box preview-footer font14">
                                <span class="box-flexo">
                                    <i><img src="" data-bind="attr:{'src':avatar}"/></i>
                                    <em data-bind="text:nickname"></em>
                                </span>
                                <span data-bind="text:create_time"></span>
                            </p>
                        </div>
                        <div class="part-show right">
                            <ul class="preview-ul" data-bind="foreach:videos">
                                <!-- ko if:index > 0 -->
                                <li>
                                    <a href="" target="_blank" data-bind="attr:{'href':videoLink},event:{mouseover:play, mouseout:pause}">
                                        <div class="preview-img">
                                            <video style="display: block;" src="" poster="" data-bind="attr:{'poster':thumb, 'src':src}" loop="loop"></video>
                                        </div>
                                        <span class="preview-title font14" data-bind="text:title"></span>
                                        <p class="display-box preview-footer font14">
                                            <span class="box-flexo">
                                                <i><img src="" data-bind="attr:{'src':avatar}"/></i>
                                                <em data-bind="text:nickname"></em>
                                            </span>
                                            <span data-bind="text:create_time"></span>
                                        </p>
                                    </a>
                                </li>
                                <!-- /ko -->
                            </ul>
                        </div>
                    </div>
                    <!-- 获奖视频 -->
                </div>
            </div>
            <!-- ko if: winningVideos().length > 1 -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <!-- /ko -->
        </div>
        <!-- /ko -->

        <!--par3-->
        <div class="part-two width13">
            <h1><img src="__PUBLIC__/App/famulei/images/rules.jpg"/></h1>
            <h2>活动规则</h2>
            <div class="display-box">
                <p class="activity-rule box-flex">
                    <span>活动内容</span>
                    只要你在66play( http://www.66play.com/)上录制《守望先锋》里的“亮眼表现”或者“全场最佳”(不一定 是你打出来的)，然后把该视频通过分享发布在伐木累上，在标题中加上#66赢大奖#即算参与活动。<br>
                    你录制的“亮眼表现”可以是自己的，可以是队友的，甚至是对手的也可以!只要录到就是赚到!
                </p>
                <p class="activity-rule box-flex">
                    <span>特别说明</span>
                    1. 所有活动参与内容必须以帖子的形式发布在伐木累“守望先锋主讨论区”圈子中。<br>
                    2. 参与活动的视频，其66play账号和伐木累账号必须一致，否则取消获奖资格。<br>
                    3. 每个ID可以发布多个活动贴，但是内容不能重复。同时每个ID每日只能获得一次奖品。<br>
                    4. 获奖奖品将于中奖名单公布后7个工作日内公布。<br>
                    5. 最终解释权归伐木累运营团队所有。<br>
                    6. 活动教程随后发布
                </p>
                <p class="activity-rule box-flex"><span>活动奖励</span>
                    1. 无人可挡奖：每天我们会从所有活动帖中选出一个每日最佳“亮眼表现”，向帖子作者赠送60战网点（11个补给箱）!<br>
                    2. 幸运女神奖：就算你今天没有录到好视频也所以别灰心，幸运女神也会向你垂青。每天我们会随机抽 出3个发帖参与活动的幸运用户，向帖子作者赠送30战网点。<br>
                </p>
            </div>
        </div>

        <!--part4-->
        <div class="part-two width13 wonderful">
            <h1><img src="__PUBLIC__/App/famulei/images/part02title.png"/></h1>
            <h2>精彩时刻</h2>
            <ul class="preview-ul">
                <!-- ko foreach:videos -->
                <li>
                    <a href="" target="_blank" data-bind="attr:{'href':videoLink},event:{mouseover:play, mouseout:pause}">
                        <div class="preview-img relative">
                            <!-- <img src="" data-bind="attr:{'src':thumb}"/> -->
                            <video style="display: block;" src="" poster="" data-bind="attr:{'poster':thumb, 'src':src}" loop="loop"></video>
                        </div>
                        <span class="preview-title font14" data-bind="text:title"></span>
                        <p class="display-box preview-footer font14">
                            <span class="box-flexo">
                                <i><img src="" data-bind="attr:{'src':avatar}"/></i>
                                <em data-bind="text:nickname"></em>
                            </span>
                            <span class="box-flexo" data-bind="text:create_time"></span>
                        </p>
                    </a>
                </li>
                <!-- /ko -->
                <p class="flip" data-bind="visible:paging().length > 1, foreach:paging">
                    <!-- ko if:!is_next -->
                    <a data-bind="css:{'active': is_current,'back_orange':is_current}, click:click, text:text" class="" href="javascript:;"></a>
                    <!-- /ko -->
                </p>
            </ul>
        </div>

        <!--part5-->
        <div class="part-three">
            <div class="width13">
                <div class="play-mes left">
                    <p class="logo-btn">
                        <span class="play-logo left"></span>
                        <a href="{:U('home/download/index')}#famulei" target="_blank" class="downloadbtn right font12">下载工具</a>
                    </p>
                    <p class="play-desc font13">
                        <span>最轻量级录制工具，独创“时光机”录制模式<br>
                            <em class="orange">[开启录制模式后，只需点击热键即可即时记录上一分钟的炫酷操作]</em>
                            <br>
                            轻松记录亮眼时刻，随时保存游戏足迹，打造专属于你的游戏回忆录！
                        </span>
                        <br><br><br>
                        <span>官方微博账号：<a href="http://weibo.com/p/1006065640304166/home?from=page_100606&mod=TAB&is_all=1#1464945059024" target="_blank" class="orange link">66play电子竞技</a></span>
                        <span>微信公众号：66Play</span>
                        <span>官方网站：<a href="{:U('/')}#famulei" target="_blank" class="orange link">www.66Play.com</a></span>
                    </p>
                </div>
                <p><img src="__PUBLIC__/App/famulei/images/footerpic.png" class="right"/></p>
            </div>
        </div>

        <script type="text/javascript">
            window._THIS = {
                defaultAvatar : "__PUBLIC__/Home/ui3/images/avatar-mr.png",
                videoLink : "{:U('home/share/video')}",
                url : "{:U('famulei/index')}",
                total : {$total},
                pager : {$limit},
                bgImg : "__PUBLIC__/App/famulei/images/topbg.jpg",
                iframeUrl : "{:U('home/VideoPlay/play')}",
            };
            function dataInit() {
                var winningVideos = {$winningVideos|json_encode};
                viewModel.winningVideos(getWinningVideos(winningVideos));
                var videos = {$videos|json_encode};
                viewModel.videos(getVideos(videos));
                viewModel.paging(getPaging(_THIS.total, _THIS.pager, 1, changePage));

                if (viewModel.winningVideos().length > 1) {
                    var swiper = new Swiper('.swiper-container', {
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        paginationClickable: true,
                        onTransitionEnd : function(el) {
                            var index = el.snapIndex;
                            viewModel.curdate(viewModel.winningVideos()[index].date);
                            $('iframe').remove();
                            $('.myElementout').find('img').fadeIn();

                            var iframeUrl = viewModel.winningVideos()[index].videos[0].iframeUrl;
                            var iframe = '<iframe src="'+iframeUrl+'" scrolling="no" frameborder="0"></iframe>';
                            $('.swiper-slide-active').find('.myElementout>img').fadeOut();
                            $('.swiper-slide-active').find('.myElementout').append(iframe);
                        }
                    });
                }
                if (viewModel.winningVideos().length > 0) {
                    viewModel.curdate(viewModel.winningVideos()[0].date);
                    var iframeUrl = viewModel.winningVideos()[0].videos[0].iframeUrl;
                    var iframe = '<iframe src="'+iframeUrl+'" scrolling="no" frameborder="0"></iframe>';
                    $('.myElementout:first').find('img').fadeOut();
                    $('.myElementout:first').append(iframe);
                }
            }
        </script>
    </body>
</html>